<div class="panel panel-default" id="clients_list">
    <div class="panel-heading">
        <h3 class="panel-title">
            All Clients
        </h3>

        <!-- <div class="panel-options">
            <a href="#" data-toggle="panel">
                <span class="collapse-icon">–</span>
                <span class="expand-icon">+</span>
            </a>
        </div> -->
    </div>
    <div class="panel-body">

        <div class="row" style="margin-bottom: 5px;">
            <div class="col-sm-12">
                <form role="form" class="form-inline pull-right" onsubmit="return false;">

                    <div class="form-group">
                        <input type="text" class="form-control" size="25" v-model="clientKey"
                            placeholder="ClientId" id="user_key" @change="search"/>
                    </div>

                    <div class="form-group">
                        <button type="button" class="btn btn-success btn-single" @click="search">Refresh</button>
                    </div>

                </form>
            </div>
        </div>

        <div class="table-responsive" data-pattern="priority-columns"
            data-focus-btn-icon="fa-asterisk" data-sticky-table-header="true"
            data-add-display-all-btn="true" data-add-focus-btn="true">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>ClientId</th>
                        <th>Location</th>
                        <th>IPAddr</th>
                        <th>Port</th>
                        <th>CleanSess</th>
                        <th>ProtoVer</th>
                        <th>Keepalive(s)</th>
                        <th>SendMsg</th>
                        <th>RecvMsg</th>
                        <th>ConnectedAt</th>
                    </tr>
                </thead>

                <tbody>
                    <tr v-for="client in clients">
                        <td>{{ client.client_id }}</td>
                        <td :onload="getLocationById(client.client_id,client.ipaddress)" :id="client.client_id"></td>
                        <!--<td :id="client.client_id">{{ getLocationById(client.client_id,client.ipaddress) }}</td>-->
                        <td>{{ client.ipaddress }}</td>
                        <td>{{ client.port }}</td>
                        <td>{{ client.clean_sess }}</td>
                        <td>{{ client.proto_ver }}</td>
                        <td>{{ client.keepalive }}</td>
                        <td>{{ client.send_msg }}</td>
                        <td>{{ client.recv_msg }}</td>
                        <td>{{ client.connected_at }}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="row">
            <div class="col-sm-6">showing
                <span id="clients_count_start">{{ pageInfo.offsetting() }}</span> -
                <span id="clients_count_end">{{ pageInfo.endNum() }}</span> of
                <span id="clients_count_all">{{ pageInfo.totalNum }}</span> records
            </div>
            <div class="col-sm-6">
                <div class="pull-right" id="pagination">
                <template v-if="pageInfo.currPage <= 1">
                <button type="button" class="btn btn-white disabled previous">Previous</button>
                </template>
                <template v-else>
                <button type="button" class="btn btn-white previous" @click="go(pageInfo.currPage-1)">Previous</button>
                </template>
                <div class="btn-group">
                    <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                        records per page <strong id="page_size">{{ pageInfo.pageSize }}</strong> <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-white" role="menu">
                        <li>
                            <a href="javascript:;" @click="changeSize(3);">3</a>
                        </li>
                        <li>
                            <a href="javascript:;" @click="changeSize(10);">10</a>
                        </li>
                        <li>
                            <a href="javascript:;" @click="changeSize(20);">20</a>
                        </li>
                        <li>
                            <a href="javascript:;" @click="changeSize(50);">50</a>
                        </li>
                        <li>
                            <a href="javascript:;" @click="changeSize(1000);">1000</a>
                        </li>
                    </ul>
                </div>
                <template v-if="pageInfo.currPage >= pageInfo.totalPage">
                <button type="button" class="btn btn-white disabled next">Next</button>
                </template>
                <template v-else>
                <button type="button" class="btn btn-white next" @click="go(pageInfo.currPage+1)">Next</button>
                </template>
                </div>
            </div>
        </div>

    </div>
</div>
